<template>
  <div class="app-container towTabel">
    <div class="customContainer">
      <!-- 搜索头 -->
      <el-form :inline="true" :model="formInline" class="demo-form-inline" size="small">
        <el-form-item>
          <el-checkbox true-label="1" false-label="0" v-model="formInline.look_del" @change="lookDelChange" border>
            查看已删门店
          </el-checkbox>
        </el-form-item>
        <el-form-item>
          <el-date-picker :editable="false" :clearable="false" v-model="pickerDate" value-format="yyyy.MM.dd" type="daterange" align="right" unlink-panels
            range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions"></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-select placeholder="选择门店" v-model="formInline.store_id" class="w160" filterable @change="storeChange">
            <el-option v-for="item in store_list" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
          <el-select placeholder="选择区域" v-model="formInline.area" class="w160">
            <el-option v-for="item in area_list" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <dj-button size="small" @search="searchClick" />
        </el-form-item>
      </el-form>
      <div class="customHeader">机台消费概况</div>
      <el-table highlight-current-row :data="total_list" border size="mini">
        <el-table-column align="center" label="机台消费(元)" prop="money"></el-table-column>
        <el-table-column align="center" label="机台消费(币)" prop="coins"></el-table-column>
        <el-table-column align="center" label="游玩次数" prop="play_count"></el-table-column>
        <el-table-column align="center" label="出货数" prop="unitsshipped"></el-table-column>
        <el-table-column align="center" label="毛利" prop="profit"></el-table-column>
        <el-table-column align="center" label="毛利率" prop="profit_rate"></el-table-column>
      </el-table>
      <br>
      <div class="customHeader">消费排行</div>
      <el-table highlight-current-row :data="list" v-loading.body="listLoading" border size="mini" @sort-change='sortChange'>
        <el-table-column align="center" label="排名">
          <template slot-scope="scope">
            <span class="indexColor">{{scope.$index+1+(currentPage-1)*20}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="区域" prop="area_name"></el-table-column>
        <el-table-column align="center" label="机台名称" prop="type_name" sortable></el-table-column>
        <el-table-column align="center" label="机台编号" prop="project_no" sortable></el-table-column>
        <el-table-column align="center" label="机台消费(元)" prop="money" sortable></el-table-column>
        <el-table-column align="center" label="机台消费(币)" prop="coins" sortable></el-table-column>
        <el-table-column align="center" label="游玩次数" prop="play_count" sortable></el-table-column>
        <el-table-column align="center" label="礼品成本(元)" prop="money_cost" sortable></el-table-column>
        <el-table-column align="center" label="出货数" prop="unitsshipped" sortable></el-table-column>
        <el-table-column align="center" label="毛利(元)" prop="profit" sortable></el-table-column>
        <el-table-column align="center" label="毛利率" prop="profit_rate" sortable></el-table-column>
      </el-table>
      <br>

    </div>
    <!-- 自定义底部 -->
    <div class="bottom_box">
      <el-pagination class="pull-left" background @current-change="handleCurrentChange" :current-page.sync="currentPage" :page-size="20"
        layout="prev, pager, next, jumper" :total="totalDataNumber">
      </el-pagination>
    </div>
  </div>
</template>
<script>
import { getList, getPage, getTotle, storeList, areaList } from '@/api/dashboard/machine_consume';
import { pickerOptionsF, pickerDateF, optionMaxTime } from '@/utils';
export default {
  data() {
    return {
      list: null,
      listLoading: false,
      store_list: null,
      area_list: [],
      currentPage: 1,
      totalDataNumber: 0,
      total_list: [],
      formInline: {
        org: 1,
        brand: '',
        store_id: '',
        date: '',
        area: '',
        sort: 'project_no',
        sort_by: 'asc',
        look_del: '0'
      },
      pickerOptions: pickerOptionsF(),
      pickerDate: pickerDateF()
    };
  },
  beforeRouteEnter(to, from, next) {
    next(vm => {
      //当进入组件之前，执行 beforRouteEnter 路由钩子函数 ,//参数vm就是当前组件的实例。
      if (!vm.store_list) {
        vm.getstore();
      }
    });
  },
  methods: {
    lookDelChange() {
      this.getstore();
    },
    sortChange(column, prop, order) {
      this.listLoading = true;
      this.formInline.sort = column.prop ? column.prop : 'project_no';
      this.formInline.sort_by = column.order == 'descending' ? 'desc' : 'asc';
      this.formInline.date = (this.pickerDate ? this.pickerDate[0] : '') + '~' + (this.pickerDate ? this.pickerDate[1] : '');
      this.handleCurrentChange(this.currentPage);
    },
    storeChange() {
      this.formInline.area = '';
      this.getarea();
    },
    getstore() {
      storeList({ look_del: this.formInline.look_del, brand: this.formInline.brand, category_id: 126 }).then(response => {
        this.store_list = response;
        let data = response.filter(res => res.id == this.$store.getters.optionId);
        if (data.length > 0) {
          this.formInline.store_id = data[0].id;
        }
        this.getarea();
      });
    },
    getarea() {
      areaList({ sid: this.formInline.store_id, category_id: 126 }).then(response => {
        response.unshift({ id: '', name: '全部区域' });
        this.area_list = response;
      });
    },
    // 搜索
    searchClick() {
      optionMaxTime(this.pickerDate).then(() => {
        //最大可选择时间区间
        this.formInline.date = (this.pickerDate ? this.pickerDate[0] : '') + '~' + (this.pickerDate ? this.pickerDate[1] : '');
        this.fetchData();
      });
    },
    // 列表获取
    fetchData() {
      this.listLoading = true;
      this.currentPage = 1;
      getPage(this.formInline)
        .then(response => {
          this.totalDataNumber = response.page * 20;
          getList(this.formInline).then(response => {
            response.forEach(val => {
              val.project_no *= 1;
              val.clevice_id *= 1;
            });
            this.list = response;
            this.listLoading = false;
          });
        })
        .catch(res => {
          this.listLoading = false;
        });
      getTotle(this.formInline).then(response => {
        this.total_list = [];
        this.total_list.push(response);
      });
    },
    handleCurrentChange(val) {
      this.listLoading = true;
      getList(this.formInline, val).then(response => {
        response.forEach(val => {
          val.project_no *= 1;
          val.clevice_id *= 1;
        });
        this.list = response;
        this.listLoading = false;
      });
    }
  }
};
</script>